<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <div class="tv">
      <!-- 导航 -->
      <div class="content-header">
        <ul class="nav">
          <li v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
      </div>
      <!-- 列表 -->
      <div class="list">
        <ul class="item">
          <li class="product-item" v-for="product in products" :key="product.id">
            <img :src="require('@/assets/images/television/' + product.image)" alt="Product Image" />
            <div class="product-name">{{ product.name }}</div>
            <div class="product-price">{{ product.price }}</div>
            <div class="product-description">{{ product.description }}</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>
  
<script>
//引入底部组件
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
let television = require("@/assets/data/television")
export default {
  components: {
    Footer,
    Header,
  },
  name: "Television",
  data() {
    return {
      list: television.list,
      products: television.products
    };
  },
};
</script>
<style scoped>
.tv {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 70px;
}

/* 导航 */
.content-header {
  width: 1226px;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.nav {
  display: flex;
  align-items: center;
}

.nav>li {
  line-height: 54px;
  width: 80px;
  height: 54px;
  font-size: 18px;
  padding: 0 20px;
  text-align: center;
  border-radius: 27px;
  color: #222;
  cursor: pointer;
}

.nav>li:hover {
  background-color: #dee4ea;
  transition: background-color ease-out 0.3s;
  font-weight: 600;
}

/* 列表 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 275px;
  height: 300px;
  border: 0;
  margin: 10px;
  padding: 20px;
  text-align: center;
  margin: 0 1vw 2vw;
  background-color: #f1f1f1;
}

.product-item:hover {
  background-color: #fff;
  transition: transform 0.6s;
}

.product-item img {
  width: 240px;
  height: 150px;
  margin-bottom: 10px;
}

.product-item .product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-item .product-price {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.product-item .product-description {
  font-size: 12px;
  color: #666;
}

.list {
  width: 1226px;
}

.item {
  display: flex;
  flex-wrap: wrap;
}</style>